<!--
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>-->


<div class="sidebar-shortcuts" id="sidebar-shortcuts">
    <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
        <button class="btn btn-success">
            <i class="ace-icon fa fa-signal"></i>
        </button>

        <button class="btn btn-info">
            <i class="ace-icon fa fa-pencil"></i>
        </button>

        <button class="btn btn-warning">
            <i class="ace-icon fa fa-users"></i>
        </button>

        <button class="btn btn-danger">
            <i class="ace-icon fa fa-cogs"></i>
        </button>
    </div>

    <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
        <span class="btn btn-success"></span>

        <span class="btn btn-info"></span>

        <span class="btn btn-warning"></span>

        <span class="btn btn-danger"></span>
    </div>
</div><!-- /.sidebar-shortcuts -->

<ul class="nav nav-list" id="sidebar-menu">
    <li data-level="1" v-for="r in resources" @click="changeArrow(r)">

        <a
                href="javascript:void(0);" class="dropdown-toggle"
                :haschild="r.children!=undefined?true:false"
        >
            <i class="menu-icon " :class="r.icon"></i>
            <span class="menu-text"
                  style="vertical-align: middle;"
            > {{r.name}} </span>
            <b class="arrow fa " :class="r.arrow"></b>
        </a>
        <b class="arrow"></b>

        <ul class="submenu nav-hide" style="display:none;" v-if="r.children!=undefined">
            <li data-level="2" v-for="child in r.children">

                <a
                        :href="child.url"
                        :haschild="child.children!=undefined?true:false"
                >
                    <i class="menu-icon " :class="child.icon"></i>
                    <span class="menu-text"
                    > {{child.name}}</span>
                </a>
                <b class="arrow"></b>

            </li>
        </ul>
    </li>

</ul><!-- /.nav-list -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
    <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<script>
    let vm = new Vue({
        el:'#sidebar-menu',
        data:{
            resources:[]//用户可用资源
        },
        methods:{
            initResources:function () {
                let setting={
                    data: {
                        simpleData: {
                            enable: true,
                            pIdKey: 'parentId'//根据node节点中的parentId属性来作为pId属性值
                        }
                    }
                }
                //找个挂载位置  生成树结构
                let tree = $.fn.zTree.init($("#sidebar-shortcuts-mini"),setting,this.resources);
                this.resources = tree.getNodes();//转换成有父子结构的数组  节点children属性有长度则还有子级
                // debugger;
                tree.destroy();//销毁树
                //动态添加箭头标记属性
                /**
                 * 1.当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，
                 * Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property
                 * 全部转为 getter/setter。
                 * 2.给data的对应绑定对象添加一个__ob__ 对象(观察者对象Observer)，该对象用于观察
                 * 对象数据变化，当对象数据发生改变(调用set方法)，会自动通知观察者($el)，我发生改变
                 * 3.vue只会对其初始化遍历的时候的property进行添加getter/setter方法，通过js代码自己动态
                 * 添加属性不会添加getter/setter方法
                 */
                for (let index in this.resources) {
                    //Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property
                    //使用 this.$set 实例方法，这也是全局 Vue.set 方法的别名
                    // this.resources[index].arrow='fa-angle-down';//默认向下

                    Vue.set(this.resources[index],'arrow','fa-angle-down');
                }

            },
            changeArrow:function (resource) {
                // debugger;
                resource.arrow=resource.arrow==='fa-angle-down'?'fa-angle-up':'fa-angle-down';
            }
        },
        created:function () {
            this.resources=sessionStorage.getItem("resources")==undefined?[]:JSON.parse(sessionStorage.getItem("resources"));
            this.initResources();
        }
    })

</script>
